<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <style>
            form {
                margin-top: 10px;
            }
            
        </style>
    </head>
    <body>
        <form class="layui-form" id="editSysUserForm">
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red" size="3">*</font>用户姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" th:attr="value=${ sysUser.username }" required lay-verify="required|username" placeholder="1-10个字符，且不能出现空格" autocomplete="off" class="layui-input">
                    <input type="hidden" name="id" th:attr="value=${ sysUser.id }">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red" size="3">*</font>登录账号：</label>
                <div class="layui-input-block">
                    <input type="text" name="account" th:attr="value=${ sysUser.account }" required lay-verify="required|account" placeholder="1-20个字符，且不能出现空格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-block">
                 <input type="text" name="email" th:attr="value=${ sysUser.email }" required lay-verify="email" placeholder="输入正确的邮箱格式" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机：</label>
                <div class="layui-input-block">
                 <input type="text" name="phone" th:attr="value=${ sysUser.phone }" required lay-verify="phone" placeholder="输入正确的手机号码格式" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" type="button">立即提交</button>
                </div>
            </div>
        </form>
        
        <script>
            layui.use(['form', 'layedit', 'laydate'], function(){
                var form = layui.form,layer = layui.layer;
                
                // 邮箱正则表达式
                var reg_email=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
                // 电话正则
                var reg_phone= /^((0\d{2,3}-\d{7,8})|(1[1-9]\d{9}))$/;
                form.verify({
                    username: [/^[\S]{1,10}$/,'1-10个字符，且不能出现空格'],
                    account: [/^[\S]{1,20}$/,'1-20个字符，且不能出现空格'],
                    password: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],
                    confirmPassword: function(value) {
                        var password = $("input[name='password']").val();
                        if (value != password) {
                            return "两次密码输入不一致";
                        }
                    },
                    email: function(value) {
                        if(value.length > 0 && !reg_email.test(value)) {
                            return "邮箱格式不正确";
                        }
                    },
                    phone: function(value) {
                        if(value.length > 0 && !reg_phone.test(value)) {
                            return "手机格式不正确";
                        }
                    }
                });
            
                //监听提交
                form.on('submit(formDemo)', function(data){
                    $.ajax({
                        url : "/sys/sysUser/editSysUser",
                        type : "post",
                        data : $("#editSysUserForm").serializeArray(),
                        success : function(result) {
                            if (result.state) {
                                layer.msg('编辑成功！', {icon: 1,time: 1000}, function(){
                                    // 1.先得到当前iframe层的索引
                                    var index = parent.layer.getFrameIndex(window.name); 
                                    // 2.再执行关闭 
                                    parent.layer.close(index); 
                                    // 调用父页面的方法
                                    window.parent.updateData();
                                });
                            } else {
                                layer.msg(""+result.msg, {icon: 5});
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>
